<template>
  <el-form
    ref="ruleFormRef"
    :model="activity"
    :label-width="formLabelWidth"
    size="large"
    :rules="rules"
  >
    <el-row>
      <el-col :span="24">
        <el-form-item label="开始结束时间" prop="date">
          <el-date-picker
            v-model="activity.date"
            type="datetimerange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="活动名称" prop="activity_name">
          <el-input v-model="activity.activity_name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="类别" prop="activity_category">
          <el-select v-model="activity.activity_category" style="width: 100%">
            <el-option
              v-for="c in categoryList"
              :key="c.activity_categoryId"
              :label="c.activity_categoryName"
              :value="c.activity_categoryId"
            ></el-option>
          </el-select> </el-form-item
      ></el-col>

      <el-col :span="12">
        <el-form-item label="备注">
          <el-input
            v-model="activity.activity_remarks"
            :rows="3"
            type="textarea"
            placeholder="Please input"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="状态">
          <el-radio-group v-model="activity.activity_state" class="ml-4">
            <el-radio label="1" size="large">开启</el-radio>
            <el-radio label="2" size="large">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="24" style="text-align: center; margin-top: 2rem">
        <el-button
          type="primary"
          style="width: 16rem"
          @click="submitAc(ruleFormRef)"
          >提交</el-button
        >
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { reqGetCategoryList, reqInsertActivity } from '@/api/activity'
import { ElMessage } from 'element-plus'
const activity = reactive({
  date: [new Date(), new Date()],
  activity_name: '',
  activity_category: '',
  activity_remarks: '',
  activity_state: '1'
})
const formLabelWidth = '10rem'
const store = useStore()
const { dispatch, commit, getters } = store
const categoryList = computed(() => getters.categoryList)
// 获取活动类型列表
const getCategoryList = async () => {
  const result = await reqGetCategoryList({ currentPage: 1, pageSize: 500 })
  if (result.code === 200) {
    commit('activity/GETCATEGORYLIST', result.data.data)
  }
}
getCategoryList()
// 表单验证
const ruleFormRef = ref()
const rules = reactive({
  activity_id: [
    { required: true, message: '活动编码不能为空', trigger: 'blur' }
  ],
  activity_name: [
    { required: true, message: '活动名称不能为空', trigger: 'blur' }
  ],
  activity_category: [
    { required: true, message: '类别不能为空', trigger: 'blur' }
  ],
  date: [{ required: true, message: '时间不能为空', trigger: 'blur' }]
})
const pagination = computed(() => getters.activityPagination)
// 提交按钮
const submitAc = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      const ac = {
        activity_name: '',
        activity_endTime: 0,
        activity_startTime: 0,
        activity_category: '',
        activity_remarks: '',
        activity_state: ''
      }
      for (const key in activity) {
        if (key !== 'date') {
          if (Object.hasOwnProperty.call(activity, key)) {
            ac[key] = activity[key]
          }
        }
      }
      ac.activity_startTime = activity.date[0]
      ac.activity_endTime = activity.date[1]
      const result = await reqInsertActivity(ac)
      if (result.code === 200 && result.data === 1) {
        ElMessage({
          message: result.msg,
          type: 'success'
        })
        dispatch('activity/getActivityList', { pagination })
        activity.date = [new Date(), new Date()]
        activity.activity_name = ''
        activity.activity_category = ''
        activity.activity_remarks = ''
        activity.activity_state = '1'
      } else {
        ElMessage({
          message: result.msg,
          type: 'warning'
        })
      }
    } else {
      return false
    }
  })
}
</script>

<style lang="scss" scoped>
.el-form {
  padding: 1rem 16rem 0 8rem;
}
.el-col {
  margin-bottom: 1rem;
}
.el-radio-group {
  flex-direction: column;
  .el-radio {
    align-self: flex-start;
  }
}
</style>
